<!--  -->
<template>
  <div class="optional">
    <div class="title clear suspend">
      <span class="label icon2">监控</span>
      <span class="refresh fr" @click="refresh"></span>
    </div>
    <div class="sub_title clear">
      <span class="txt">每日指标信号监控</span>
      <span class="time">每交易日盘后更新</span>
      <span class="fr setpoup" @click="openPoup('1')">指标监控设置</span>
    </div>
    <div class="noMore" v-if="targetList.length == 0">
      <img :src="PIC_URL + '/tlbypcWeb/optional/wushuju.png'" alt="" />
    </div>
    <div class="list" v-if="targetList.length > 0">
      <div class="item" v-for="item in targetList" :key="item.id">
        <span class="time">{{ item.updateTime }} {{ item.minuteType }}</span>
        <span class="stockCode">{{ item.stockCode }}</span>
        <span class="stockName">{{ item.stockName }}</span>
        <span>发出</span>
        <span class="blue">{{ item.signal }}</span>
        <span :class="item.color" v-show="item.statusTxt">{{
          item.statusTxt
        }}</span>
        <span>信号</span>
      </div>
    </div>
    <div class="loadMore" @click="toRouter('techindex')">更多></div>
    <div class="sub_title clear">
      <span class="txt">每日形态信号监控</span>
      <span class="time">每交易日盘后更新</span>
      <span class="fr setpoup" @click="openPoup('0')">形态监控设置</span>
    </div>
    <div class="noMore" v-if="shpeList.length == 0">
      <img :src="PIC_URL + '/tlbypcWeb/optional/wushuju.png'" alt="" />
    </div>
    <div class="list" v-if="shpeList.length > 0">
      <div class="item" v-for="item in shpeList" :key="item.id">
        <span class="time">{{ item.updateTime }}</span>
        <span class="stockCode">{{ item.stockCode }}</span>
        <span class="stockName">{{ item.stockName }}</span>
        <span>发出</span>
        <span class="blue">{{ item.signal }}</span>
        <span :class="item.color" v-show="item.statusTxt">{{
          item.statusTxt
        }}</span>
        <span>信号</span>
      </div>
    </div>
    <div class="loadMore" @click="toRouter('shape')">更多></div>
    <div class="title">
      <span class="label icon1">预警</span>
      <span class="setpoup" @click="openMyMonitor">我的预警></span>
    </div>
    <div class="noMore" v-if="earlyList.length == 0">
      <img :src="PIC_URL + '/tlbypcWeb/optional/wushuju.png'" alt="" />
    </div>
    <div class="early" v-if="earlyList.length > 0">
      <div class="b_v">
        <div class="item" v-for="item in earlyList" :key="item.id">
          <p>
            <span class="time">{{ item.updateTime }} </span>
            <span class="stockCode">{{ item.stockCode }}</span>
            <span class="stockName">{{ item.stockName }} </span>
          </p>
          <p class="signal">
            <span>达到预警条件</span>
            <span class="blue">{{ item.content }} </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfoList, getFeeds } from "../api/index";
import { CLIENT } from "@/common/const";

import dayjs from "dayjs";
export default {
  data() {
    return {
      earlyList: [],
      targetList: [],
      shpeList: [],
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.getInfoList();
    this.getTechFeeds();
    this.getShapeFeeds();
  },

  methods: {
    refresh() {
      location.reload();
    },
    openPoup(type) {
      const { userId } = this.$route.params;
      window.prompt(
        "",
        `up://["open.web",${Date.now()},{"url":"${CLIENT}/client/monitorList/index.html?userId=${userId}&type=${type}","title":"监控设置","popuptype":1}]`
      );
    },
    openMyMonitor() {
      const { userId } = this.$route.params;
      window.prompt(
        "",
        `up://["open.web",${Date.now()},{"url":"${CLIENT}/client/myMonitor/index.html?userId=${userId}","title":"我的预警","popuptype":1}]`
      );
    },
    async getInfoList() {
      const { userId } = this.$route.params;
      await getInfoList({ userId }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.earlyList = data.alert.map((item) => {
            const signal = item.pushContent.split(" ");
            item.content = signal[signal.length - 1];
            return item;
          });
        }
      });
    },
    toRouter(type) {
      //techindex  shape
      const { userId } = this.$route.params;
      this.$router.push({ path: `/history/${type}/${userId}` });
    },
    async getTechFeeds() {
      const { userId } = this.$route.params;
      await getFeeds({
        userId,
        pageSize: 5,
        feedType: "techindex",
      }).then((back) => {
        if (back.status == 1) {
          let dataList = back.data.dataList;
          dataList.map((item) => {
            item.updateTime = String(item.tradeDate).replace(
              /^(\d{4})(\d{2})(\d{2})/,
              "$1-$2-$3"
            );
            if (item.minuteType) {
              item.minuteType = String(item.minuteType).replace(
                /(\d{2})(\d{2})/,
                "$1:$2"
              );
            } else {
              item.minuteType = "";
            }
            item.statusTxt = ["", "看多", "看空"][item.tradeType];
            item.signal = item.signalTitle;
            item.color = {
              green: item.tradeType == 2,
              red: item.tradeType == 1,
            };
          });
          this.targetList = dataList;
        }
      });
    },
    async getShapeFeeds() {
      const { userId } = this.$route.params;
      await getFeeds({
        userId,
        pageSize: 5,
        feedType: "shape",
      }).then((back) => {
        if (back.status == 1) {
          let dataList = back.data.dataList;
          dataList.map((item) => {
            item.updateTime = String(item.tradeDate).replace(
              /^(\d{4})(\d{2})(\d{2})/,
              "$1-$2-$3"
            );
            item.statusTxt = ["", "看多", "看空"][item.tradeType];
            item.signal = item.signalTitle;
            item.color = {
              green: item.tradeType == 2,
              red: item.tradeType == 1,
            };
          });
          this.shpeList = dataList;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.optional {
  padding-top: 30px;
  .title {
    line-height: 30px;
    background: #1c1d21;
    padding: 0 10px;
    .label {
      font-size: 16px;
      color: #ff8a00;
      &::before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 18px;
        position: relative;
        top: 2px;
        margin-right: 7px;
      }
      &.icon1:before {
        background: url($PIC_URL + "/tlbypcWeb/optional/yj.png") no-repeat
          center;
      }
      &.icon2:before {
        background: url($PIC_URL + "/tlbypcWeb/optional/jk.png") no-repeat
          center;
      }
    }
    .refresh {
      width: 18px;
      height: 18px;
      background: url($PIC_URL + "/tlbypcWeb/optional/refresh_sel.png")
        no-repeat left;
      cursor: pointer;
      position: relative;
      top: 6.5px;
      &:hover {
        background-position: -18px 0;
      }
    }
    .setpoup {
      background: #333333;
      border: 1px solid #666666;
      display: inline-block;
      width: 74px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 13px;
      color: #ffffff;
      border-radius: 2px;
      margin-left: 10px;
      cursor: pointer;
      &:hover {
        background: #621517;
        border: 1px solid #a20d0d;
      }
    }
  }
  .suspend {
    position: fixed;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    top: 41px;
    z-index: 10;
  }
  .sub_title {
    padding: 16px 0;
    font-size: 15px;
    line-height: 28px;
    .txt {
      border-left: 2px solid #ff8a00;
      padding-left: 8px;
      color: #ff8a00;
      padding-right: 15px;
    }
    .time {
      color: #cccccc;
    }
    .setpoup {
      width: 104px;
      height: 26px;
      background: linear-gradient(0deg, #343845, #4e596d);
      border: 1px solid #3d3d4b;
      border-radius: 2px;
      cursor: pointer;
      margin-right: 10px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 26px;
      &:hover {
        background: linear-gradient(180deg, #b93636, #6a0101);
        border: 1px solid #b83636;
      }
    }
  }
  .early {
    padding: 9px 13px;
    .b_v {
      border-left: 1px solid #1d202c;
      padding: 5px 7px;
      .item {
        border: 1px solid #1d202c;
        position: relative;
        padding: 10px 9px;
        font-size: 15px;
        line-height: 20px;
        margin-bottom: 7px;
        color: #cccccc;
        span {
          margin-right: 10px;
        }
        .stockCode,
        .stockName {
          color: #f4f636;
        }
        .blue {
          color: #02e2f4;
        }

        .signal {
          padding-top: 10px;
        }
        &::before {
          content: "";
          display: block;
          position: absolute;
          width: 7px;
          height: 7px;
          background: #1d202c;
          border-radius: 50%;
          top: -7px;
          left: -12px;
        }
      }
    }
  }
  .statistics {
    padding: 0 10px 16px;
    justify-content: space-between;
    border-bottom: 1px solid #1d202c;
    .item {
      min-width: 142px;
      margin-right: 11px;
      &:last-child {
        margin-right: 0;
      }
      .title {
        line-height: 27px;
        font-size: 15px;
        color: #e6e6e6;
        text-align: center;
        &.blue {
          background: #253952;
        }
        &.red {
          background: #4e2d2d;
        }
        &.purple {
          background: #303065;
        }
      }
      .num {
        line-height: 42px;
        background: #1d202c;
        text-align: center;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
  .list {
    padding: 0 10px 16px;
    border-bottom: 1px solid #1d202c;
    &:last-child {
      border-bottom: none;
    }
    .item {
      line-height: 26px;
      position: relative;
      font-size: 15px;
      color: #999999;
      span {
        margin-right: 8px;
      }
      .stockCode,
      .stockName {
        color: #f4f636;
      }
      .blue {
        color: #02e2f4;
      }
      .green {
        color: #31ed24;
      }
      .red {
        color: #ea2827;
      }
    }
  }
  .loadMore {
    background: #13151e;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #bcbfc4;
    cursor: pointer;
  }
  .noMore {
    img {
      display: block;
      margin: 0 auto;
    }
  }
}
</style>
